<template>
	<view class="content">

		<view class="backgroud-top">
			<image src="/static/logo.png"></image>
		</view>

		<view class="phone-panel">

			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="0rpx;">

				<uni-forms-item name="phone">
					<uni-easyinput prefixIcon="person" placeholder="手机号" v-model="formData.phone" />
				</uni-forms-item>

				<uni-forms-item name="password">
					<uni-easyinput prefixIcon="locked" type="password" placeholder="密码" v-model="formData.password" />
				</uni-forms-item>

				<uni-row>
					<uni-col :span="12">
						<uni-forms-item name="code">
							<uni-easyinput prefixIcon="compose" placeholder="验证码" v-model="formData.code" />
						</uni-forms-item>
					</uni-col>
					<uni-col :span="1">
						<view style="height: 10rpx"></view>
					</uni-col>
					<uni-col :span="11">
						<uni-forms-item>
							<image class="code-image" :src="codeUrl" @click="getCode"></image>
						</uni-forms-item>
					</uni-col>
				</uni-row>

				<uni-forms-item>
					<button @click="submit">登 录</button>
				</uni-forms-item>


			</uni-forms>

		</view>



	</view>
</template>



<script>
	
	import {mapMutations,mapActions} from 'vuex'
	export default {
		data() {
			return {
				codeUrl: "",
				formData: {
					//phone: '15888888888',
					//phone: '13788802707',
					//password: 'admin123',
					phone: undefined,
					password: undefined,
					code: "",
					uuid: ""
				},
				rules: {
					phone: {
						rules: [{
								required: true,
								errorMessage: "不能为空"
							},
							{
								pattern: '^(((\\d{3,4}-)?[0-9]{7,8})|(1[0-9]{10}))$',
								errorMessage: "号码格式有误"
							},
						],
					},
					password: {
						rules: [{
							required: true,
							errorMessage: "不能为空"
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: "不能为空"
						}]
					}
				}
			}
		},
		methods: {
			...mapMutations(['setToken','setUserInfo','SET_PERMISSIONS']),
			...mapActions(['loadPerms']),
			getCode() {
				this.$http({
					url: '/captchaImage',
					headers: {
						isToken: false
					},
					method: 'get',
				}).then(res => {
					this.codeUrl = "data:image/gif;base64," + res.img;
					this.formData.uuid = res.uuid;
				})
			},
			submit() {
				uni.showLoading()
				this.$refs.form.validate().then(res => {
					this.$http({
						url: '/wx/wxLogin/passwordLogin',
						headers: {
							isToken: false
						},
						method: 'post',
						data: this.formData
					}).then(res => {
						this.setToken(res.token)
						this.setUserInfo(res.user)
						
						this.loadPerms()
						
						uni.reLaunch({
							url:'/pages/index/index'
						})
						uni.hideLoading()
					})
					
				}).catch(err => {
					uni.hideLoading()
				})
			},
			

		},
		onShow() {
			this.getCode();
		}
	}
</script>

<style lang="scss">
	.content {
		height: 1300rpx;
	}

	.phone-panel {
		height: 300rpx;
		width: 600rpx;
		margin-top: 50rpx;
	}

	.backgroud-top {
		height: 300rpx;
		width: 500rpx;

		image {
			height: 100%;
			width: 100%;
		}
	}

	button {
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1296db;
		color: white;
	}

	.code-image {
		width: 100%;
		height: 100%;
	}
</style>